<template>
    <div class="navBar-page">
      <div class="" style="height: 1rem;"></div>
        <van-tabbar v-model="active" route>
            <van-tabbar-item replace  @click="gotoHome" class="navbar-item">
                <!-- <span>首页</span> -->
                <img class="icon1" :src="active == 0 ? icon.inactive : icon.active" />
                <div class="text">{{$i18n.t('default.tab.home')}}</div>
            </van-tabbar-item>
            <van-tabbar-item @click="gotoBount" class="navbar-item">
                <!-- <span>门店</span> -->
                <img class="icon1" :src="active == 1 ? icon1.inactive : icon1.active" />
                <div class="text">{{$i18n.t('default.tab.bonus')}}</div>
            </van-tabbar-item>
            <van-tabbar-item @click="gotoMy" class="navbar-item" >
                <img class="icon1" :src="active == 2 ? icon2.inactive : icon2.active" />
                <div class="text">{{$i18n.t('default.tab.mine')}}</div>
            </van-tabbar-item>
        </van-tabbar>
    </div>
</template>
<script>
export default {
  data() {
    return {
      active: this.$store.state.navBarNum,
      icon: {
        active:require('../assets/image/shouye2.png'),
        inactive: require('../assets/image/shouye.png'),
      },
      icon1: {
        active: require('../assets/image/jiangjn2.png'),
        inactive: require('../assets/image/jiangjn.png'),
      },
      icon2: {
        active: require('../assets/image/wode2.png'),
        inactive: require('../assets/image/wode.png'),
      },
    };
  },
  created(){
    this.active = this.$store.state.navBarNum
    console.log('active: ',this.active)
    
  },
  mounted(){
    
  },
  methods:{
    gotoHome(){
      this.$router.push({
        path: '/'
      })
    },
    gotoBount(){
      this.$router.push({
        path: '/bount'
      })
    },
    gotoMy(){
      this.$router.push({
        path: '/My'
      })
    },
   
  }
};
</script>

<style>
.van-tabbar{height:  1rem;}
.navbar-item{
  text-align: center;
  display: flex !important;
}
.van-tabbar-item__icon img{
  /* width: .215rem;
  height: .22rem; */
}
.navbar-item .icon1{
  width: .46rem;
}
</style>